<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <head>
        <th:block th:include="include :: header('职位列表')"/>
    </head>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="searchForm">
                <div class="select-list">
                    <ul>

                        <li>
                            登录用户：<input type="text" id="loginName" name="loginName">
                        </li>
                        <li>
                            登录IP：<input type="text" id="loginIP" name="loginIP">
                        </li>
                        <li>
                            登录状态：
                            <select id="loginStatus">
                                <option value="-1">全部</option>
                                <option value="1">成功</option>
                                <option value="0">失败</option>
                            </select>
                        </li>
                        <li>
                            日期：<input type="text" id="startDate" name="startDate" th:value="${startDate}" onclick="WdatePicker({isShowClear:true,dateFmt:'yyyy-MM-dd'})" readonly="readonly">
                        </li>
                        <li>
                            至：<input type="text" id="endDate" name="endDate" th:value="${endDate}" onclick="WdatePicker({isShowClear:true,dateFmt:'yyyy-MM-dd'})" readonly="readonly">
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" id="searchButton"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" id="resetButton"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" role="group" id="toolbar">
            <a class="btn btn-danger multiple disabled" onclick="removeAll(this);" data-id="0" data-role="admin:loginlog:delete">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-danger" onclick="clearAll(this);" data-id="0" data-role="admin:loginlog:clear">
                <i class="fa fa-trash"></i> 清空日志
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="dataTable"></table>
        </div>

    </div>
</div>


<th:block th:include="include :: footer"/>
<!-- jquery-validate 表单树插件 -->
<script type="text/javascript" th:inline="javascript">
    let $table;
    $(function () {
        loadData();

    });


    function loadData() {
        let options = {
            url: '/admin/loginlog/getPageList',
            pageNumber: 1,                      // 初始化加载第一页，默认第一页,并记录
            pageSize: 10,                       // 每页的记录行数（*）
            pageList: "10, 25, 50, 100",        // 可供选择的每页的行数（*）
            queryParams: function (params) {
                let p = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    loginName: $('#loginName').val(),
                    loginIP: $('#loginIP').val(),
                    loginStatus: $('#loginStatus').val(),
                    startDate: $('#startDate').val(),
                    endDate: $('#endDate').val()
                }
                return p;
            },
            columns: [
                { field: 'selectItem', checkbox: true },
                {
                    field: 'loginName', title: '登录用户', align: "center"
                },
                { field: 'requestIp', title: '登录IP', align: "center" },
                { field: 'realAddress', title: '地址', align: "center" },
                { field: 'osinfo', title: '操作系统', align: "center" },
                { field: 'browser', title: '浏览器', align: "center" },
                { field: 'requestTime', title: '登录时间', align: "center" },
                {
                    field: 'loginStatus', title: '信息', align: "center", formatter: function (v, r) {

                        if (v === 1) {
                            return '<span class="badge badge-primary">'+r.loginMessage+'</span>';
                        }
                        return '<span class="badge badge-danger">'+r.loginMessage+'</span>';
                    }
                }
            ]

        };
        $table = $('#dataTable').easyTable(options);

    }

    function renderResult(v, d) {
        var logTitle = 'info';
        var logClass = 'badge-info';
        switch (v) {
            case 2:
                logTitle = 'debug';
                logClass = 'badge-success';
                break;
            case 3:
                logTitle = 'warn';
                logClass = 'badge-warning';
                break;
            case 4:
                logTitle = 'error';
                logClass = 'badge-danger';
                break;

        }
        var html = '<span class="badge ' + logClass + '">' + logTitle + '</span>';

        return html;
    }

    function renderOpts(v) {
        var html = '<a data-role="0" class="btn btn-white btn-bitbucket" title="View" href="javascript:void(0);" onclick="detail(this)" data-id="' + v + '"><i class="fa fa-eye"></i></a>';
        return html;
    }




    function removeAll(obj) {
        const rows = $table.easyTable("selected");
        if (rows.length == 0) {
            jutils.warn("请选择数据行");
            return;
        }

        let ids=[];
        for (let i = 0; i < rows.length; i++) {
            ids.push(rows[i].id);
        }
        jutils.confirm("确认删除日志数据吗？", function () {
            jutils.ajaxGet("/admin/loginlog/removeAll", {ids: ids.join()}, function (res) {
                if (res.status) {
                    $table.easyTable('search');
                }
            });
        });
    }

    function clearAll(obj) {

        jutils.confirm("确认清空登录吗？", function () {
            jutils.ajaxGet("/admin/loginlog/clearAll", null, function (res) {
                if (res.status) {
                    $table.easyTable('search');
                }
            });
        });
    }

</script>
</body>
</html>